<template>
	<div class="tool-bar" :style="toolStyle" @mouseleave="hidden_toolbar">
		<!--  -->
		<ul>
			<!-- <li>编辑</li> -->
			<li :class="['delete']" @click="deldom">删除 <span>Delete</span></li>
			<!-- <li>置顶</li>
			<li>置底</li> -->
			<li @click="add_zindex">上移</li>
			<li @click="reduce_zindex">下移</li>
		</ul>
	</div>
</template>

<script>
	export default {
		name: 'TextTool',
		data() {
			return {}
		},
		mounted: function() {

			// 点击的不是当前组件的时候，设置当前组价中的工具栏隐藏
			//this.$store.commit('SET_COMP_ISSHOW', false)

		},
		computed: {
			toolStyle() {
				const top = this.$store.getters.top
				const left = this.$store.getters.left
				return {
					'top': top + 'px',
					'left': left + 'px',
				}
			}
		},
		methods: {
			hidden_toolbar() {
				this.$store.commit('SET_COMP_ISSHOW', false)
			},
			// 删除指定的dom
			deldom() {
				const compId = this.$store.getters.compId
				this.$store.dispatch('delDom', compId)
				this.$store.commit('SET_COMP_ISSHOW', false)
				this.$store.commit('CLOSE_PROPS_PANEL')
			},
			// 上移
			add_zindex() {
				this.set_index(true)
			},
			// 下移
			reduce_zindex() {
				this.set_index(false)
			},
			// 设置zindex
			set_index(isadd) {
				const compId = this.$store.getters.compId
				var zindex = this.$store.getters.getCompConfigByCompid(compId).css.z
				const comps = this.$store.getters.getCompByPageId().comps
				var compsArr = []
				for (var i = 0; i < comps.length; i++) {
					compsArr.push({
						z_index: comps[i].css.z,
						compid: comps[i].id
					})
				}
				//对数组进行排序
				compsArr = compsArr.sort(function(a, b) {
					return a.z_index - b.z_index
				})
				var resultArr = []
				if (isadd) {
					// 如果当前索引已经是最大值得索引则不交换
					if (zindex != compsArr[compsArr.length - 1].z_index) {
						var filterArr = compsArr.filter(function(elem, index, arr) {
							return elem.z_index > zindex
						})
						resultArr.push({
							compid: compId,
							z_index: filterArr[0].z_index
						})
						resultArr.push({
							compid: filterArr[0].compid,
							z_index: zindex
						})
					}
				} else {
					//如果当前索引不等于最小索引，则进行交换
					if(zindex!=compsArr[0].z_index){
						var filterArr = compsArr.filter(function(elem, index, arr) {
							return elem.z_index < zindex
						})
						resultArr.push({
							compid:compId,
							z_index:filterArr[filterArr.length-1].z_index
						})
						resultArr.push({
							compid:filterArr[filterArr.length-1].compid,
							z_index:zindex
						})
					}
				}
				if(resultArr.length>0){
					this.$store.dispatch('setIndex',resultArr)
				}
			}
		}
	}
</script>
<style>
	.tool-bar {
		position: fixed;
		min-width: 120px;
		display: block;
		z-index: 9999;
		font-size: 12px;
		background-color: #fff;
		box-shadow: 0 0 16px rgba(0, 0, 0, .16);
		cursor: pointer;
		padding: 4px 0;
	}

	.tool-bar li {
		height: 24px;
		line-height: 24px;
		padding: 0 16px;
		position: relative;
		box-sizing: content-box;
		color: #333;
	}

	.tool-bar li a {
		color: #333;
	}

	.tool-bar li span {
		float: right;
		color: #999;
	}

	.tool-bar li:hover {
		background-color: #1593ff;
		color: #fff;
	}

	.tool-bar li a:hover {
		color: #1593ff;
	}

	.tool-bar li:hover span {
		color: #fff;
	}

	.tool-bar li.delete:hover {
		background-color: #ff296a;
	}

	.tool-bar li.bottom_bar {
		display: flex;
		justify-content: space-between;
	}

	.tool-bar li.bottom_bar:hover {
		background-color: #fff;
	}

	.container,
	.comp-lists {
		overflow: visible;
	}
</style>
